<template>
  <div class="v-tab-content" :style="{ width: state.width }">
    <div class="v-tab-banner">
      <template v-for="(item, index) in state.data" :key="index">
        <div
          :class="{
            'v-tab-item': true,
            'v-tab-label-normal': true,
            'v-tab-active': state.active == item.name || state.activeIndex === index,
            'v-tab-label-arrows': item.banner === 'arrows',
          }"
          @click="tabClick($event, item, index)"
          :style="{
            color: state.active == item.name || state.activeIndex === index ? '#FFF' : state.defaultColor,
            'border-left': index == 0 ? '1px solid #dcdfe6' : 'none',
          }"
        >
          <span> {{ item.label || item[labelName] }}<slot v-if="item.slotName" :name="item.slotName"></slot></span>
        </div>
      </template>
      <slot v-if="$slots.tabPane" name="tabPane"></slot>
    </div>
    <div class="v-tab-view">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
  import { reactive, getCurrentInstance, onMounted, onUnmounted, watch, provide } from 'vue'
  const { proxy } = getCurrentInstance()
  const _this = proxy
  const props = defineProps({
    data: {
      type: Array,
      default: () => [],
    },
    width: {
      type: [String],
      default: () => '100%',
    },
    height: {
      type: [String],
      default: () => '100%',
    },
    fontSize: {
      type: String,
      default: () => '12px',
    },
    activeColor: {
      type: [String],
      default: () => '#1dd2af',
    },
    defaultColor: {
      type: [String],
      default: () => '#000',
    },
    activeIndex: {
      type: Number,
      default: -1,
    },
    labelName: {
      type: [String],
      default: () => 'name',
    },
    activeName: {
      type: [Number, String],
      default: () => '',
    },
  })

  defineOptions({
    name: 'v-tabs',
  })

  const state = reactive({
    data: props.data,
    activeIndex: props.activeIndex,
    width: props.width,
    height: props.height,
    active: props.activeName,
    fontSize: props.fontSize,
    activeColor: props.activeColor,
    defaultColor: props.defaultColor,
  })

  watch(
    () => props,
    (newVal, oldVal) => {
      state.width = props.width
      state.height = props.height
      state.active = props.activeName
      state.data = props.data
      state.activeIndex = props.activeIndex
      state.fontSize = props.fontSize
      state.activeColor = props.activeColor
      state.defaultColor = props.defaultColor
    },
    { deep: true }
  )

  const emit = defineEmits(['tabClick'])
  const tabClick = (e, tab, index) => {
    state.activeIndex = index
    emit('tabClick', index, tab)
    // e.stopPropagation()
  }
  const clear = () => {
    state.data = []
  }
  //暴露方法
  defineExpose({
    clear,
  })

  //传递监听方法给子组件
  const setTabBar = (tab) => {
    const label = tab.label,
      type = typeof label
    state.data.push({
      label: tab.label,
      name: tab.name,
      banner: tab.banner, //控制样式
    })
  }
  const provideData = () => {
    return {
      active: () => state.active,
      setTabBar: setTabBar,
    }
  }
  provide('provideData', provideData)

  onMounted(() => {})

  onUnmounted(() => {})
</script>
<style scoped lang="scss">
  .v-tab-content {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: column;
    justify-content: flex-start;
    cursor: default;
    height: 100%;
    font-size: var(--theme-font-size);
  }

  .v-tab-banner {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: default;
    width: 100%;
    padding-bottom: calc(var(--theme-font-size) / 4);
    border-bottom: 1px solid #dcdfe6;
    overflow: auto;
  }

  .v-tab-item {
    //z-index: 10;
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-width: 100px;
    padding: calc(var(--theme-font-size) / 4) 0;
    border: 1px solid #dcdfe6;
    cursor: pointer;
    // height: var(--theme-font-size * 2);
    //margin-right: 20px;
    border-color: '#dcdfe6';
  }

  .v-tab-active {
    background-color: var(--theme-color);
    color: white;
    border-color: var(--theme-color);
  }

  .v-tab-label-normal {
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-width: 100px;
  }

  .v-tab-label-arrows {
    position: relative;
  }

  .v-tab-label-arrows:after {
    z-index: 100;
    content: '';
    position: absolute;
    right: -10px;
    top: 2.5px;
    /* move it down because of rounded corners */
    height: 16.97px; //288开方
    /* button_inner_height / sqrt(2) */
    width: 16.97px;
    /* same as height */
    background: inherit;
    /* use parent background */
    border: 1px solid #dcdfe6;
    //border-left: none;
    //border-bottom: none;

    border-right: none;
    border-top: none;

    border-radius: 0 !important;
    -webkit-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    transform: rotate(225deg);
  }

  .v-active-arrow {
    display: 'inline-block';
    width: 0px;
    height: 0px;
    border: 4px solid transparent;
    border-top-color: transparent;
    //border-top-color: #1dd2af;
  }

  .v-active-line {
    display: 'inline-block';
    width: 100%;
    height: 0px;
    border-top: 1px solid transparent;
    border-top-color: transparent;
  }

  .v-tab-view {
    width: 100%;
    height: calc(100% - 32px);
    display: flex;
    display: inline-flex;
    display: -webkit-flex;
    /* Safari */
    flex-direction: column;
    justify-content: flex-start;
  }
</style>
